<template>
    <div class="cart">
        <cartNavBar class="cart-nav">
            <div slot="center" class="center">购物车({{length}})</div>
        </cartNavBar>

        <cart-list></cart-list>

        <cart-bottom-bar></cart-bottom-bar>
    </div>
</template>

<script>
import CartNavBar from 'components/common/navbar/NavBar'
import CartList from './childCart/CartList.vue'
import CartBottomBar from './childCart/CartBottomBar'

// 可将getters里的方法转成计算属性, 需导入
import {mapGetters} from 'vuex'




export default {
    components: {
        CartNavBar,
        CartList,
        CartBottomBar
    },
    computed: {
        // carLength() {
        //     return this.$store.getters.carlength
        // }
        // 方法一
        // ...mapGetters(['carLength'])
        // 二
        ...mapGetters({
            length: 'carLength'
        })
    }
}
</script>


<style scoped>
    .cart{
        height: 100vh;
    }
    .cart-nav{
        background: var(--color-tint);
        color: #fff;
        position: relative;
        z-index: 1;
        /* font-weight: bold; */
    }
</style>